<template>
	<view :style="theme">
		<view class="aboutBallList">
			<view v-for="(item, index) in list" :key="index" class="mt24" @click="jump('/pages/aboutBall/detail?id=',item.id)">
				<view v-if="item.status==1 || item.status==3" class="ballTop flex-cb registeredEndColor">
					<view class="f30">{{item.projectName}}约球</view>
					<view class="f28">{{item.dateLimit}}</view>
				</view>
				<view v-if="item.status==2 || item.status==4" class="ballTop flex-cb underwayColor">
					<view class="f30">{{item.projectName}}约球</view>
					<view class="f28">{{item.dateLimit}}</view>
				</view>
				<view v-if="item.status==5 || item.status==6" class="ballTop flex-cb finishedColor">
					<view class="f30">{{item.projectName}}约球</view>
					<view class="f28">{{item.dateLimit}}</view>
				</view>
				<view class="ballBottom">
					<view class="flex-left">
						<image :src="imgHost+'/yueqiu_ic_time.png'"></image>
						<view class="f26 ml16 c3">{{item.beginTime}}-{{item.endTime }}</view>
					</view>
					<view class="flex-left mt30">
						<image :src="imgHost+'/yueqiu_ic_address.png'"></image>
						<view class="f26 ml16 c3">{{item.siteName}}</view>
					</view>
					<view class="flex-cb mt30">
						<view class="flex-left">
							<view class="c9 f24">{{item.creatorName}}</view>
							<view class="longString"></view>
							<view class="c9 f24">限{{item.numUp}}人</view>
						</view>
						<view v-if="item.status==2" class="registered">{{item.numJoin}}人已报名</view>
						<view v-if="item.status==3" class="registeredEnd">报名结束</view>
						<view v-if="item.status==4" class="underway">进行中</view>
						<view v-if="item.status==5" class="finished">已结束</view>
						<view v-if="item.status==6" class="finished">已取消</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无活动～</view>
		</view>
		<view class="initiateBall flex-center" @click="jump('/pages/aboutBall/initiateBall')">
			<image :src="imgHost+'/ic_faqi.png'"></image>
			<view class="cf f20">发起</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
			}
		},
		onShow() {
			this.searchBtn()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			searchBtn() {
				this.firstQueryTime = this.$app.firstQueryTime()
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			getList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							venueId: this.venueId,
							flag: 1
						}
					},
					api: this.$api.listMeet()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = [...this.list, ...res.recordList]
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>

<style lang="scss" scoped>
	.aboutBallList {
		padding: 0 30rpx;
	}

	.ballTop {
		background: $blueBg;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx 30rpx;
		color: #ffffff;
	}

	.ballBottom {
		padding: 30rpx;
		background-color: #ffffff;
	}

	.ballBottom image {
		width: 26rpx;
		height: 26rpx;
	}

	.longString {
		width: 4rpx;
		height: 24rpx;
		background-color: #999;
		margin: 0 10rpx;
	}

	/* 按钮样式 */
	.registered {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid $color;
		color: $color;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	.registeredEnd {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid #666666;
		color: #666666;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	.underway {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid $moreColor;
		color: $moreColor;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	.finished {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid #B2B2B2;
		color: #B2B2B2;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	/* 已报名/报名结束背景色 */
	.registeredEndColor {
		background: $phb;
	}

	/* 进行中背景色 */
	.underwayColor {
		background: $blueBg;
	}

	/* 已结束背景色 */
	.finishedColor {
		background: #CCCCCC;
	}

	.initiateBall {
		width: 88rpx;
		height: 88rpx;
		background: $phb;
		// box-shadow: 0rpx 4rpx 8rpx 0px rgba(221, 80, 64, 0.2), inset 0rpx 4rpx 16rpx 0px rgba(255, 255, 255, 0.28);
		border-radius: 50%;
		position: fixed;
		right: 40rpx;
		bottom: 184rpx;
	}

	.initiateBall image {
		width: 32rpx;
		height: 32rpx;
	}
</style>
